<template>
    <div>
      <div class="content">
        <div class="header">
          <!-- 修改表单区域 -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="商品信息" style="width: 200px">
              <el-select
                v-model="formInline.key_type"
                placeholder="请选择"
                style="width: 200px"
                @change="getselect1()"
              >
                <el-option
                  v-for="item in searchselectdata"
                  :key="item.value"
                  :label="item.lable"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="创建时间">
                            <el-date-picker v-model="formInline._create_time" type="datetimerange" range-separator="To"
                                start-placeholder="Start date" end-placeholder="End date" />
                        </el-form-item> -->
            <el-form-item label="搜索关键字">
              <el-input
                v-model="formInline._key_word"
                placeholder="请输入关键字"
                clearable
              />
            </el-form-item>
        
     
  
            <el-form-item>
              <el-button type="primary" @click="submitSee">查询</el-button>
              <el-button type="primary" plain @click="onSubmit">重置</el-button>
              <el-button type="primary" @click="btnAdd">新增</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="area">
         
      
  
         <div class="table-area">
          
            <el-table
              border
              :data="dataList"
              stripe
              style="width: 100%;margin-top: 22px;"
              v-loading="loading"
      element-loading-text="开发中..."
            >
           
            <el-table-column
                prop="id"
                align="center"
                label="ID"
                #default="scope"
             
              >
              </el-table-column>
              <el-table-column
                prop="id"
                align="center"
                label="名称"
                #default="scope"
             
              >
              </el-table-column>
              <el-table-column
                prop="id"
                align="center"
                label="分站ID"
                #default="scope"
             
              >
              </el-table-column>
              
             
              <el-table-column
                prop="goods_name"
                align="center"
                label="链接地址"
                #default="scope"
               
              >
              <el-switch v-model="value1" />
              </el-table-column>
  
            
            
              <el-table-column
                align="center"
                prop="_level_name"
                label="图片"
                #default="scope"
              >
                
              </el-table-column>
              <el-table-column
                align="center"
                prop="_level_name"
                label="排序"
                #default="scope"
              >
                
              </el-table-column>
              <el-table-column
                align="center"
                prop="_level_name"
                label="状态"
                #default="scope"
              >
              <el-switch v-model="value1" />
            </el-table-column>
              <el-table-column
                align="center"
                prop="_level_name"
                label="创建时间"
                #default="scope"
              >
           
              </el-table-column>
              <el-table-column
                align="center"
                fixed="right"
                label="操作"
                width="180px"
              >
                <template #default="scope">
                  <div>
                      <el-button
                      type="primary"
                      
                      size="small"
                     @click="btnAdd"
                      style="margin-bottom: 5px"
                      >编辑</el-button
                    >
                    <el-button
                      type="danger"
                      plain
                      size="small"
                      @click="shenji(scope.row, 0)"
                      style="margin-bottom: 5px"
                      >删除</el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination-container">
            <el-pagination
              :current-page="currentPage"
              :page-size="pageSize"
              :total="total"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handlePageSizeChange"
              @current-change="handleCurrentPageChange"
            />
          </div>
          </div>
  
          <!-- 新增分页组件 -->
        
        </div>
      </div>
  
      <!-- 图片预览对话框 -->
      <div class="image-overlay">
        <el-dialog v-model="imgShow" :show-close="false" width="36%">
          <img style="width: 100%" :src="currentImage" alt="" />
        </el-dialog>
      </div>
    
          <!-- 编辑升级任务 -->
          <el-dialog
        v-model="dialogVisible2"
        :title="titleName"
        width="50%"
        :before-close="handleClose"
      >
       <div class="tblas">
        <div style="margin-top: 18px;">
            <span>名称</span>
            <div style="margin-top:8px;">
              <el-input
               style="width: 202px;"
                v-model="formInline._key_word"
                placeholder="请输入名称"
                clearable
              />
            </div>
          </div>
          <div style="margin-top: 18px;">
            <span>链接</span>
            <div style="margin-top:8px;">
              <el-input
               style="width: 202px;"
                v-model="formInline._key_word"
                placeholder="请输入链接"
                clearable
              />
            </div>
          </div>
          <div style="margin-top: 18px;">
            <span>图片</span>
            <div class="tupians" style="margin-left: 38px">
            <div
              class="imglists"
              v-for="(item, index) in imgsList"
              :key="index"
            >
              <span class="xx" @click="btnDetai(index)">x</span>
              <img class="imgs" :src="item.url" alt="" />
            </div>
          </div>
          <div>
            <el-upload
              class="avatar-uploader"
              :http-request="httpRequest" 
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </div>
          </div>
          <div style="margin-top: 18px;">
            <span>排序</span>
            <div style="margin-top:8px;">
              <el-input
               style="width: 202px;"
                v-model="formInline._key_word"
                placeholder="请输入链接"
                clearable
              />
            </div>
          </div>
          <div style="margin-top: 18px;">
            <span>状态</span>
            <div style="margin-top:8px;">
              <el-radio-group v-model="radio">
                <el-radio :label="3">显示</el-radio>
                <el-radio :label="6">隐藏</el-radio>
               
              </el-radio-group>
            </div>
          </div>
       </div>
      
    
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible2 = false">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { Plus } from '@element-plus/icons-vue'
  import Quill from 'quill';
  import 'quill/dist/quill.snow.css'; // 引入样式
  import type { UploadProps } from 'element-plus'
  import {
    uploads
  } from "~/base/api/product/productList.ts";
  const editorContainer =ref("")
  import { delOrder } from "~/base/api/order/orderList.ts";
  import {
    getList,
    getCustomerListRenderBeforeData,
  } from "~/base/api/admin/adminList.ts";
  import {
    PictureFilled,
    ArrowDown,
    CopyDocument,
    Picture,
    ArrowUp,
  } from "@element-plus/icons-vue";
  import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
  import axios from "axios";
  import { Loading } from "@element-plus/icons-vue";
  import {
    ElMessageBox,
    ElMessage,
    ElLoading,
    componentSizeMap,
  } from "element-plus";
  import { range } from "lodash-es";
  import { select } from "radash";
  import order from "@/router/static-routes/order";
  import { Row } from "element-plus/lib/components/table-v2/src/components/index.js";
  const names = ref(0);
  const heShow = ref(true);
  const actives=ref(0)
  const titleName=ref('新增')
  const dialogVisible = ref(false);
  const dialogVisible2=ref(false)
  const imgShow = ref(false);
  // 图片预览相关状态
  const previewVisible = ref(false);
  const currentImage = ref("");
  const statuss = ref("");
  const tableData =ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  ]) 
  const drawer = ref(false);
  const tabname = ref(0);
  const num=ref(1)
  const num2=ref(1)
  const quillInstance=ref(null)
  const editorContent=ref('')
  const dengji = ref("");
  const orderstatuslist = ref([]);
  const searchselectdata = ref([]);
  const loading=ref(true)
  const goodstypelist = ref([]);
  const dockinglist = ref([]);
  const ranges = ref([]);
  const orderfrom = ref([]);
  //下拉搜索
  function getselect1() {
    getSetdocking();
  }
  function getselect2() {
    getSetdocking();
  }
  function getselect3() {
    getSetdocking();
  }
  function getselect4() {
    getSetdocking();
  }
  function getselect5() {
    getSetdocking();
  }
  function getKami(e) {
    console.log("这个获取的是什么", e, form.value.card_ids);
    let bobo = [];
    for (let item of e) {
      bobo.push(item.id);
    }
    console.log("测试波波是多少", bobo.join(","));
    form.value.card_ids = bobo.join(",");
  }
  
  //点击展开
  function btnHe() {
    heShow.value = false;
  }
  function btnHe2() {
    heShow.value = true;
  }
  function initQuill() {
  console.log('为什么先走这个符文布')
  try {
    // 检查DOM元素是否存在
    if (!editorContainer.value) throw new Error('DOM容器未就绪');
    
    // 初始化Quill实例，并保存到quillInstance
    quillInstance.value = new Quill(editorContainer.value, {
      theme: 'snow',
      modules: {
        toolbar: [
      // 标题格式
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      
      // 基本文字格式
      ['bold', 'italic', 'underline', 'strike'],
      
      // 文字颜色和背景色
      [{ 'color': [] }, { 'background': [] }],
      
      // 字体和字号
      [{ 'font': [] }, { 'size': ['small', false, 'large', 'huge'] }],
      
      // 列表
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      
      // 对齐方式
      [{ 'align': [] }],
      
      // 缩进
      [{ 'indent': '-1'}, { 'indent': '+1' }],
      
      // 链接和图片
      ['link', 'image', 'video'],
      
      // 代码块、引用、公式
      ['code-block', 'blockquote', 'formula'],
      
      // 清除格式
      ['clean']
    ],
  
      }
    });
  
    // 设置初始内容
    if (editorContent.value) {
      quillInstance.value.root.innerHTML = editorContent.value;
    }
  
    // 监听编辑器的变化
    quillInstance.value.on('text-change', () => {
      if (ignoreInternalUpdate) return;
      const newHTML = quillInstance.value.root.innerHTML;
      
      // 只有当内容确实改变时才更新editorContent
      if (editorContent.value !== newHTML) {
        ignoreInternalUpdate = true;
        editorContent.value = newHTML;
        ignoreInternalUpdate = false;
      }
    });
  } catch (e) {
    console.error("初始化Quill失败:", e);
    boboShow.value=true
  }
  
  }
  // 打开图片预览
  const openImagePreview = (imageUrl) => {
    console.log("11111", imageUrl);
    currentImage.value = imageUrl;
    imgShow.value = true;
  };
  
  // 关闭图片预览
  const closeImagePreview = () => {
    previewVisible.value = false;
  };
  
  // 更现代的复制函数（推荐）
  async function btnOrdersn2(orderSn) {
    try {
      // 使用现代clipboard API
      await navigator.clipboard.writeText(orderSn);
  
      // 显示成功提示
      if (ElNotification) {
        ElNotification({
          title: "复制成功",
          message: `已复制订单号：${orderSn}`,
          type: "success",
          duration: 1500,
        });
      } else {
        alert(`已复制：${orderSn}`);
      }
    } catch (err) {
      console.error("复制失败:", err);
      // 降级方案
      const tempTextarea = document.createElement("textarea");
      tempTextarea.value = orderSn;
      document.body.appendChild(tempTextarea);
      tempTextarea.select();
  
      try {
        document.execCommand("copy");
        ElMessage({
          message: "复制成功",
          type: "success",
        });
      } catch (fallbackErr) {
        console.error("降级复制失败:", fallbackErr);
      } finally {
        document.body.removeChild(tempTextarea);
      }
    }
  }
  
  // 更现代的复制函数（推荐）
  async function btnOrdersn5(orderSn) {
    try {
      // 使用现代clipboard API
      await navigator.clipboard.writeText(orderSn);
  
      // 显示成功提示
      if (ElNotification) {
        ElNotification({
          title: "复制成功",
          message: `已复制订单号：${orderSn}`,
          type: "success",
          duration: 1500,
        });
      } else {
        alert(`已复制：${orderSn}`);
      }
    } catch (err) {
      console.error("复制失败:", err);
      // 降级方案
      const tempTextarea = document.createElement("textarea");
      tempTextarea.value = orderSn;
      document.body.appendChild(tempTextarea);
      tempTextarea.select();
  
      try {
        document.execCommand("copy");
        ElMessage({
          message: "复制成功",
          type: "success",
        });
      } catch (fallbackErr) {
        console.error("降级复制失败:", fallbackErr);
      } finally {
        document.body.removeChild(tempTextarea);
      }
    }
  }
  const orderObj = ref({});
  const recharge_hints = ref("");
  const httpRequest = async (options) => {
    try {
      const formData = new FormData();
      formData.append('file', options.file);
      
      // 调用你的API接口
      const res = await uploads(formData);
      
      if (res.code === 200) {
        options.onSuccess(res.data); // 必须调用以更新文件列表状态
        return res;
      } else {
        options.onError(new Error(res.message));
      }
    } catch (err) {
      options.onError(err);
    }
  };
  
  const form = ref({
    card_ids: "",
    backmoney_part: "",
    address_company: "",
    money1: "",
    checked1: "true",
    backmoney_type: "2",
    order_style: "1",
    current_progress: "",
    target_progress: "",
    recharge_hints: "",
    start_progress: "",
    status: 3, // 数字
    address_ordersn: "",
  });
  
  const dataUser = ref([]);
  //查看详情
  function btnSee(e) {
    getCustomerListRenderBeforeData({ id: e.id }).then((res) => {
      console.log("详情结果", res);
  
      drawer.value = true;
      orderObj.value = res.data.user_info;
      dataUser.value = res.data.user_level_list;
      for (let item of res.data.user_level_list) {
        if (orderObj.value.level_id == item.value) {
          dengji.value = item.lable;
        }
      }
      if (orderObj.value.status == 1) {
        orderObj.value.status = true;
      } else {
        orderObj.value.status = false;
      }
      if (orderObj.value.noneed_userinput_pass == 1) {
        orderObj.value.noneed_userinput_pass = false;
      } else {
        orderObj.value.noneed_userinput_pass = true;
      }
      if (orderObj.value.weixin_nickname == "") {
        orderObj.weixin_nickname = "未绑定";
      }
      if (orderObj.value.qq == "") {
        orderObj.value.qq = "未绑定";
      }
      if (orderObj.value.is_team_head == 0) {
        orderObj.value.is_team_head = false;
      } else {
        orderObj.value.is_team_head = true;
      }
    });
  }
  const dataList = ref([]);
  // 添加响应式检测
  const isMobile = ref(false);
  
  const channelTreeData = ref([]); // 渠道树形结构数据
  const currentPage = ref(1); // 当前页码
  const pageSize = ref(10); // 每页显示数量
  const total = ref(0); // 总记录数
  const keyword = ref("");
  const keytype = ref("");
  const fenDate=ref([
    {
      name:'首页公告'
    },
    {
      name:'行业动态'
    },
    {
      name:'常见问题'
    },
    {
      name:'帮助信息'
    },
    {
      name:'最新动态'
    }
  ])
  const formInline = reactive({
    _key_word: "",
    _key_type: "",
    _status: "",
    supplier_id: "",
    docking_id: "",
    cost_price: "",
    face_price: "",
    _goods_from: "",
    _goods_type: "",
    _time_range: "",
    _end_time_range: "",
    price: "",
  });
  const value = ref("");
  const options = [
    {
      value: "Option1",
      label: "等级1",
    },
    {
      value: "Option2",
      label: "等级2",
    },
  ];
  function handleIpClick(ip) {
    const url = `https://www.ip138.com/iplookup.php?ip=${encodeURIComponent(ip)}`;
    window.open(url, "_blank"); // 打开新标签页
  }
  //用户等级
  function btnDeng() {
    dialogVisible.value = true;
  }
  //点击tab切换
  function btnName(e) {
    actives.value = e;
  }
  //点击电锯切换
  function btnTable(e) {
    tabname.value = e;
  }
  function handleUpdateNode({ id, property, value }) {
    // 更新树数据中对应节点的属性
    const updateNode = (nodes) => {
      return nodes.map((node) => {
        if (node.id === id) {
          return { ...node, [property]: value };
        }
        if (node.list) {
          return { ...node, list: updateNode(node.list) };
        }
        return node;
      });
    };
    channelTreeData.value = updateNode(channelTreeData.value);
  }
  
  // 删除方法
  const handleDelete = (id: string) => {
    ElMessageBox.confirm("确定要删除这条记录吗?", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // 这里调用删除API
        delOrder({ id: id }).then(() => {
          ElMessage.success("删除成功");
          //fetchData(); // 刷新列表
          getSetdocking();
        });
      })
      .catch(() => {
        ElMessage.info("已取消删除");
      });
  };
  
  // 查询处理
  const handleQuery = () => {
    currentPage.value = 1; // 重置为第一页
    getSetdocking();
  };
  
  // 重置查询条件
  const handleReset = () => {
    formInline.user = "";
    handleQuery();
  };
  // 分页尺寸变化
  const handlePageSizeChange = (size: number) => {
    pageSize.value = size;
    getSetdocking();
  };
  
  // 页码变化
  const handleCurrentPageChange = (page: number) => {
    currentPage.value = page;
    getSetdocking();
  };
  onMounted(() => {
    getSetdocking();
    nextTick(() => {
    initQuill()
  })
  
   
  });
  //新增打开弹框
  function btnAdd(){
      dialogVisible2.value=true
  }
  function btnEditn(){
      dialogVisible.value=true
  }
  //升级任务
  function shenji(){
      dialogVisible2.value=true
  }
  //查询
  function submitSee() {
    console.log("erer");
    getSetdocking();
  }
  function getFullInfoText(infoArray) {
    if (!Array.isArray(infoArray)) return "";
  
    // 过滤有效值并格式化为可读文本
    return infoArray
      .map((item) => {
        //const key = item.key?.trim() || "参数";
        const val = item.value?.toString() || "";
        return ` ${val}`;
      })
      .join("\n"); // 用换行符分隔每个条目
  }
  
  //列表
  function getSetdocking() {
    // 显示 loading
    const loadingInstance = ElLoading.service({
      target: ".el-dialog", // 针对对话框区域
      lock: true,
      text: "正在加载数据中...",
      background: "rgba(0, 0, 0, 0.7)",
    });
    let parm = {
      page: currentPage.value,
      limit: pageSize.value,
      ...formInline,
    };
    getList(parm)
      .then((res) => {
        if (res.code == 200) {
          dataList.value = res.data.data;
          console.log("获取的数据", dataList.value);
          for (let item of dataList.value) {
            if (item.status == 1) {
              item.status = true;
            } else {
              item.status = false;
            }
          }
          if (res.data.data) {
            total.value = Number(res.data.count);
          }
  
          console.log("获取的数据222", dataList.value);
        }
      })
      .finally(() => {
        // 数据加载完成后关闭 loading
        loadingInstance.close();
      });
  }
  </script>
  <style>
  .el-input.is-disabled .el-input__wrapper {
    background: white !important;
  }
  </style>
  <style scoped>
  .deep .el-input.is-disabled .el-input__wrapper {
    background: white !important;
  }
  .order-titme {
  }
  
  .iconss {
    color: #999;
    cursor: pointer;
    position: relative;
    top: 3px;
  }
  .actives{
    background-color: #f0f7ff !important;
  }
  .iconss:hover {
    color: #1890ff;
  }
  
  .icons {
    font-size: 21px !important;
    position: relative !important;
    top: 18px !important;
    padding-right: 28px !important;
    left: 12px !important;
  }
  
  .icons2 {
    font-size: 50px !important;
    position: relative !important;
    top: 10px !important;
    padding-right: 28px !important;
    left: 12px !important;
  }
  
  .sanfang {
    margin-left: 12px;
    font-size: 11px;
    color: #1890ff;
    cursor: pointer;
  }
  .lie-top {
    display: flex;
    justify-content: center;
  }
  .lie-input {
    width: 100%;
    background-color: white;
  }
  .orders-names {
  }
  
  .order-names {
    display: flex;
    margin-top: 15px;
  }
  
  .order-information {
  }
  
  .order-detail {
    height: 142px;
    border-bottom: 1px solid #3333;
    margin-top: 10px;
    font-size: 13px;
    padding-bottom: 14px;
  }
  
  .activeTab {
    border-bottom: 1px solid #1890ff !important;
    color: #1890ff !important;
  }
  
  .activeTabs {
    border-bottom: 1px solid #1890ff !important;
    color: #1890ff !important;
  }
  
  .area-tab {
    display: flex;
    position: relative;
    left: -28px;
  }
  .area-tabs {
    height: 50vh;
    overflow: auto;
  }
  
  .area-name {
    margin-left: 30px;
    cursor: pointer;
    height: 31px;
  }
  
  .areas-header {
    height: 32px;
    border-bottom: 1px solid #3333;
    width: 100%;
  }
  
  .bianhao {
    margin-top: 16px;
    margin-left: 9px;
    font-size: 13px;
  }
  
  .right-name {
    margin-left: 8px;
  }
  
  .areas {
    width: 98%;
    margin: 0 auto;
  
    margin-top: 40px;
  }
  
  .quxiao {
    /* color: white;
            background-color: rgba(0, 0, 0, .65); */
    font-size: 12px;
    margin-top: 8px;
  }
  
  .type-name {
    margin-left: 80px;
  }
  .imgs {
    width: 70px;
    height: 70px;
    position: relative;
    top: 4px;
    border-radius: 6px;
  }
  .area-left{
    width: 24%;
  }
  .lefts{
    width: 84%;
    border: 1px solid #3333;
    height: 300px;
    margin-left: 18px;
    position: relative;
    top: 23px;
    border-radius:8px;
  }
  .xx {
    position: absolute;
    right: -4px;
    color: red;
    top: -7px;
    cursor: pointer;
  }
  .types {
    display: flex;
    margin-top: 30px;
    position: relative;
  
    font-size: 13px;
  }
  .inputs2 {
    width: 60vw;
    padding-left: 12px;
  }
  
  .imgsleft {
    width: 70px;
    height: 70px;
  }
  
  .img-left {
    width: 9%;
  }
  
  .img-content {
    margin-top: 12px;
    display: flex;
  }
  
  .contents-title {
    display: flex;
    margin-top: 14vh;
    justify-content: space-between;
  }
  
  .unbers {
    color: #1890ff;
    background-color: #e8f4ff;
    border-color: #d1e9ff;
    margin-left: 12px;
    font-size: 11px;
    height: 22px;
    width: 56px;
    text-align: center;
  }
  
  .ordername {
    color: #333;
    border: 1px solid #3333;
    border-color: #333;
    /* padding: 1px 9px 1px 9px; */
    margin-left: 12px;
    height: 22px;
    width: 56px;
    text-align: center;
    font-size: 11px;
    line-height: 22px;
  }
  
  .kami {
    color: #13ce66;
    background-color: #e7faf0;
    border-color: #d0f5e0;
    font-size: 11px;
    height: 22px;
    width: 56px;
    text-align: center;
  }
  a {
    text-decoration: none;
    color: inherit;
  }
  .shu2 {
    width: 3px;
    height: 20px;
    background-color: #1890ff;
    position: relative;
    top: 25px;
    left: -8px;
  }
  .zhuangtai {
    display: flex;
    margin-top: 12px;
    font-size: 13px;
  }
  .imgs {
    width: 50px;
    height: 50px;
    position: relative;
    top: 4px;
    border-radius: 6px;
  }
  .right-header{
    width: 100%;
    border: 1px solid #3333; 
    height: 80px;
  }
  .rights{
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
    margin-top: 26px;
  }
  .shoyue{
    width: 72%;
    margin: 0 auto;
    margin-top: 12px;
    padding-left: 30px;
    padding-bottom: 2px;
    padding-top: 2px;
    cursor: pointer;
  }
  .left-header{
    height: 60px;
    width: 100%;
    line-height: 60px;
    border-bottom: 1px solid #3333;
   
  }
  .table-name {
    color: #1890ff;
    width: 60px;
    margin: 0 auto;
    cursor: pointer;
    font-size: 11px;
    text-align: center;
    height: 23px;
    line-height: 23px;
  }
  
  .table-name2 {
    border-color: rgba(0, 0, 0, 0.65);
    color: white;
    padding: 3px 5px 3px 9px;
    cursor: pointer;
  }
  
  .footerss {
    display: flex;
    width: 96%;
    margin: 0 auto;
    font-size: 13px;
  }
  .imglists {
    display: flex;
    margin-left: 9px;
    position: relative;
  }
  .footers {
    width: 98%;
    border: 1px solid #3333;
    margin: 0 auto;
    height: 100px;
    margin-top: 25px;
  }
  
  .tabname {
    color: #409eff !important;
    border-bottom: 2px solid #409eff !important;
  }
  
  .tab-name {
    margin-left: 18px;
    cursor: pointer;
    height: 30px;
  }
  .inputs {
    margin-top: 12px;
  }
  .header-area {
    display: flex;
    position: relative;
    left: -18px;
    top: 1px;
  }
  
  .names {
    background: #409eff !important;
    color: white !important;
    border: none !important;
  }
  
  .jiaoyi {
    background-color: #13ce66;
  }
  
  .header-name {
    border-radius: 20px;
    padding: 3px 16px 3px 16px;
    border: 1px solid #9999;
    margin-left: 12px;
    font-size: 13px;
    cursor: pointer;
  }
  
  .headers {
    display: flex;
    padding-bottom: 12px;
  }
  
  .m-2 {
    width: 160px;
  }
  
  .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }
  
  .configurations {
    margin-top: 12px;
  }
  
  .configuration-area {
  }
  
  .dialog-footer {
    margin: 0 auto;
    margin-top: 30px;
    text-align: center;
  }
  
  .orders-name {
    margin-top: 12px;
  }
  
  .orders {
    margin-left: 12px;
  }
  
  .order-area {
    width: 98%;
    padding-bottom: 12px;
    border: 1px solid #409eff;
    background-color: #e8f4ff;
  }
  .zanwu {
    display: flex;
    justify-content: center;
    position: relative;
    top: 25vh;
  }
  .tabs-area {
    margin-top: 12px;
  }
  .he {
    margin-left: 12px;
    color: #1890ff;
    cursor: pointer;
  }
  .diolog-content {
  }
  
  .shu {
    width: 3px;
    height: 20px;
    background-color: #1890ff;
    position: relative;
    top: 19px;
  }
  
  .shuaxin {
    font-size: 12px;
    color: #409eff;
    padding-right: 2px;
    cursor: pointer;
  }
  
  .table-area {
    width: 98%;
    margin: 0 auto;
    margin-top: 30px;
  }
  
  .tabs-price {
    border: 1px solid #3333;
    padding: 5px 12px 3px 12px;
  }
  
  .timeShow {
    color: red !important;
  }
  
  .tabs {
    margin-left: 10px;
  }
  
  .tab-header {
    display: flex;
    width: 100%;
  }
  .info-area {
    display: flex;
    white-space: nowrap;
    width: 88%;
  
    text-overflow: ellipsis;
    white-space: nowrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  
    cursor: pointer;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
    text-align: center;
  }
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  .custom-editor {
  flex-grow: 1; /* 编辑区域填充剩余空间 */
  }
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  .avatar-uploader {
    position: relative;
  
    left: 10px;
    width: 80px;
    height: 80px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
  }
  .avatar-uploader:hover {
    border-color: #409eff;
    background-color: #f5f7fa;
  }
  .info-area2 {
  }
  .info-area:hover {
    color: #1890ff;
  }
  .area {
    width: 100%;
    background-color: white;
    padding-bottom: 28px;
    margin-top: 18px;
    padding-top: 14px;
    display: flex;
  }
  
  .content {
    width: 96%;
    margin: 0 auto;
    height: 80vh;
    margin-top: 26px;
  }
  
  .header {
    background-color: white;
    padding: 17px 0 1px 12px;
    border-radius: 8px;
  }
  
  .is-loading {
    animation: rotating 2s linear infinite;
  }
  
  @keyframes rotating {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  
  /* 基础响应式设置 */
  .content {
    width: 96%;
    margin: 0 auto;
    margin-top: 26px;
    padding-bottom: 20px;
  }
  
  /* 表格区域响应式 */
  .table-area {
    width: 100%;
    margin: 0 auto;
    margin-top: 20px;
    overflow-x: auto;
  }
  
  /* 分页容器 */
  .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    overflow-x: auto;
  }
  
  /* 对话框内容 */
  .diolog-content {
    padding: 10px;
  }
  
  /* 标签页区域 */
  .tabs-area {
    margin-top: 12px;
  }
  
  /* 配置区域 */
  .configurations {
    margin-top: 12px;
  }
  
  /* 对话框底部按钮 */
  .dialog-footer {
    margin: 20px auto 0;
    text-align: center;
  }
  .nameshopping {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 70px;
    cursor: pointer;
    text-align: center;
  }
  .nameshopping:hover {
    color: #1890ff;
  }
  /* 订单区域 */
  .order-area {
    width: 100%;
    padding: 12px;
    border: 1px solid #409eff;
    background-color: #e8f4ff;
    box-sizing: border-box;
  }
  .tblas{
    
  }
  /* 刷新按钮样式 */
  .shuaxin {
    font-size: 12px;
    color: #409eff;
    padding-right: 2px;
    cursor: pointer;
  }
  
  /* 加载动画 */
  .is-loading {
    animation: rotating 2s linear infinite;
  }
  
  @keyframes rotating {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  .tupians {
    display: flex;
  }
  /* 响应式调整 */
  @media (max-width: 768px) {
    /* 头部表单 */
    .header {
      padding: 10px;
    }
  
    /* 表单项目 */
    .el-form-item {
      width: 100%;
      margin-right: 0;
      margin-bottom: 10px;
    }
  
    /* 标签页 */
    .el-tabs {
      overflow-x: auto;
    }
  
    /* 对话框内容 */
    .diolog-content {
      padding: 5px;
    }
  
    /* 输入框宽度 */
    .el-input {
      width: 100% !important;
    }
  
    /* 表格操作按钮 */
    .el-table-column--fixed-right .el-button {
      margin-bottom: 5px;
    }
  
    /* 标签页头 */
    .tab-header {
      flex-direction: column;
    }
  
    .tabs {
      margin: 5px 0;
    }
  
    /* 对话框标题 */
    .el-dialog__title {
      font-size: 16px;
    }
  }
  
  /* PC端特定样式 */
  @media (min-width: 769px) {
    .content {
      /* max-width: 1200px; */
    }
  
    .table-area {
      width: 98%;
    }
  
    .diolog-content {
      min-width: 500px;
    }
  
    .el-form--inline .el-form-item {
      margin-right: 10px;
    }
  }
  </style>
  